<template>
    <view>
        <view class="wrap-list flex just-between">
            <block v-for="(item, index) in goodsList" :key="item.id">
                <view class="itemx" @click="toDetail(item.category, item.id, item.shop.mobile)">
                    <!-- image -->
                    <!-- <image class="file" :src="imageURL + 'template/goods_2.png'"></image> -->
                    <image class="file" :src="BaseUrl + item.image"></image>

                    <view class="bottom">
                        <view class="title f-28 limit-one-line">
                            {{ item.title }}
                        </view>

                        <view class="price-bg flex align-base">
                            <text class="f-22 symbol">¥</text>
                            <text class="fb-30">{{ item.price }}</text>

                            <view class="line"></view>

                            <text class="f-22"
                                >会员价 ¥{{
                                    item.sku[0].vip_price ? item.sku[0].vip_price : item.price
                                }}</text
                            >
                        </view>

                        <view class="store-info flex align-end">
                            <view class="info">
                                <view class="integral f-22"
                                    >购物获得积分{{
                                        item.sku[0].send_score ? item.sku[0].send_score : "0"
                                    }}</view
                                >

                                <view class="store-name f-22 limit-one-line">{{
                                    item.shop.shopname || ''
                                }}</view>
                            </view>

                            <!-- <view class="addCart">
                                <image :src="imageURL + 'home/shopCart.png'"></image>
                            </view> -->
                        </view>
                    </view>
                </view>
            </block>
        </view>
    </view>
</template>

<script>
import { imageURL } from "@/utils/config";
import { BaseUrl } from "../../utils/req.js";
export default {
    props: {
        list: {
            type: Array,
            default: [1, 2, 3, 4, 1, 1, 1, 1, 1, 1],
        },
        goodsList: {
            type: Array,
            default: [],
        },
    },
    data() {
        return {
            imageURL,
            BaseUrl,
        };
    },
    methods: {
        toDetail(category, id, mobile) {
            if (!category) {
                this.$request.get("api/wanlshop.product/goods", { id: id }).then((res) => {
                    let category = res.data.category;
                    let id = res.data.id;
                    let mobile = res.data.shop.mobile;
                    if ([11, 14].includes(category.pid)) {
                        uni.navigateTo({
                            url: `/dabai/pages/caterDetails/caterDetails?id=${id}&pid=${category.pid}&mobile=${mobile}`,
                        });
                    } else {
                        uni.navigateTo({
                            url: "/pages/product/goods?id=" + id,
                        });
                    }
                });
            } else if ([11, 14].includes(category.pid)) {
                uni.navigateTo({
                    url: `/dabai/pages/caterDetails/caterDetails?id=${id}&pid=${category.pid}&mobile=${mobile}`,
                });
            } else {
                uni.navigateTo({
                    url: "/pages/product/goods?id=" + id,
                });
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.wrap-list {
    width: 100%;
    overflow: hidden;
    flex-wrap: wrap;

    .itemx {
        width: 344rpx;
        background-color: white;
        border-radius: 16rpx;
        overflow: hidden;
        margin-bottom: 15rpx;

        .file {
            width: 344rpx;
            height: 344rpx;
        }

        .bottom {
            width: 100%;
            padding: 18rpx 22rpx 26rpx;
            box-sizing: border-box;

            .title {
                line-height: 1.2rem;
                color: $text-color;
            }

            .price-bg {
                margin-top: 20rpx;
                width: 100%;
                overflow: hidden;
                color: $price-color;
                display: flex;
                align-items: center;

                .symbol {
                    margin-right: 5rpx;
                }

                .line {
                    margin-left: 10rpx;
                    width: 2rpx;
                    height: 16rpx;
                    background-color: $price-color;
                    margin-right: 10rpx;
                }
            }

            .store-info {
                margin-top: 20rpx;
                width: 100%;

                .info {
                    flex: 1;
                    overflow: hidden;
                    margin-right: 10rpx;

                    .integral {
                        color: $gray-color;
                    }

                    .store-name {
                        margin-top: 13rpx;
                        color: $gray-color;
                    }
                }

                .addCart {
                    margin-right: -5rpx;

                    > image {
                        width: 48rpx;
                        height: 48rpx;
                    }
                }
            }
        }
    }
}
</style>
